<!-- @format -->
<template>
  <div>
    <!-- 按钮 -->
    <button @click="cpName = 'MyLeft'">李沁</button>
    <button @click="cpName = 'MyRight'">宋轶</button>
    <!-- 内容 -->
    <div class="main">
      <!-- 
          1. 结论：每次组件切走了，其实是被销毁了；
                  每次组件切回来了，其实是被再次创建了
          2. 问题：如果频道让组件切来切去，会让组件频繁的创建和销毁，
                  这样会增大开销，降低性能，肯定不合理
          3. 解决办法：做组件缓存
          4. 缓存的好处(掌握2点)：
            （1） 保存组件的数据状态
             (2) 减少无效的网络请求
             归结一点：提高组件性能、降低开销、增强用户体验
       -->
      <!-- 
        组件缓存：
          用<keep-alive>包裹动态组件，这样凡是切换的组件都会被缓存起来，
          一旦被缓存了，组件就不会频繁的创建和销毁了，而是把组件缓存在内存中，
          这样就保存了组件的状态并且减少了无效网络请求
          
      -->
      <keep-alive>
        <component :is="cpName" />
      </keep-alive>
    </div>
  </div>
</template>

<script>
  import MyLeft from './components/MyLeft.vue'
  import MyRight from './components/MyRight.vue'
  export default {
    components: {
      MyLeft,
      MyRight
    },
    data() {
      return {
        cpName: 'MyLeft'
      }
    }
  }
</script>

<style></style>
